<template>
  <div style="text-align: center">
    <el-row :gutter="20">
      <el-col :span="5" :offset="0">
        <div style="width: 250px; height: 300px; border: 1px solid #cfcfcc">
          <div>
            <Lock class="centered" />
          </div>

          <br />

          <div>
            <span>登录密码</span>
          </div>

          <br />

          <div>
            <el-button @click="changePassword()">修改密码</el-button>
          </div>

          <el-dialog v-model="dialogFormVisible" title="修改密码" width="500">
            <el-form
              ref="ruleFormRef"
              style="max-width: 600px"
              :model="ruleForm"
              :rules="rules"
              label-width="auto"
              class="demo-ruleForm"
              status-icon
            >
              <el-form-item label="当前密码">
                <el-input v-model="ruleForm.password" show-password />
              </el-form-item>

              <el-form-item label="新密码" prop="newPassword">
                <el-input v-model="ruleForm.newPassword" show-password />
              </el-form-item>

              <el-form-item label="确认新密码" prop="affirmNewPassword">
                <el-input v-model="ruleForm.affirmNewPassword" show-password />
              </el-form-item>

              <el-form-item>
                <el-button
                  style="margin-left: 400px"
                  type="primary"
                  @click="submitForm(ruleFormRef)"
                >
                  保存
                </el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
        </div>
      </el-col>
      <el-col :span="5" :offset="0">
        <div style="width: 250px; height: 300px; border: 1px solid #cfcfcc">
          <div>
            <Iphone class="centered" />
          </div>

          <br />

          <div>
            <span>修改手机号</span>
          </div>

          <br />

          <div>
            <el-button>修改手机号</el-button>
          </div>
        </div>
      </el-col>
    </el-row>

    <br />

    <el-row :gutter="20">
      <el-col :span="5" :offset="0">
        <div style="width: 250px; height: 300px; border: 1px solid #cfcfcc">
          <div>
            <switchButton class="centered" />
          </div>

          <br />

          <div>
            <span>账号注销</span>
          </div>

          <br />

          <div>
            <span>彻底关闭不再使用平台账号</span>
          </div>

          <br />

          <div>
            <el-button @click="cancelAccount()">注销账号</el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="5" :offset="0">
        <div style="width: 250px; height: 300px; border: 1px solid #cfcfcc">
          <div>
            <Setting class="centered" />
          </div>

          <br />

          <div>
            <span>安全密码</span>
          </div>

          <br />

          <div>
            <span>审批、支付密码设置</span>
          </div>

          <br />

          <div>
            <el-button>立即设置</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import axios from "axios";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import type { FormInstance, FormRules } from "element-plus";

const staffId = localStorage.getItem("staffId");

const router = useRouter();

const dialogFormVisible = ref(false);

interface RuleForm {
  password: string;
  newPassword: string;
  affirmNewPassword: string;
}

const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  password: "",
  newPassword: "",
  affirmNewPassword: "",
});

const rules = reactive<FormRules<RuleForm>>({
  newPassword: [
    { required: true, message: "请输入新密码", trigger: "blur" },
    {
      pattern: /^[a-zA-Z0-9]{6,16}$/,
      message: "支持字母与数字组合，长度6-16位",
      trigger: "blur",
    },
  ],
  affirmNewPassword: [
    { required: true, message: "请输入确认新密码", trigger: "blur" },
    {
      pattern: /^[a-zA-Z0-9]{6,16}$/,
      message: "支持字母与数字组合，长度6-16位",
      trigger: "blur",
    },
  ],
});

//修改密码弹出层
const changePassword = () => {
  dialogFormVisible.value = true;
  axios
    .get("Readroute/api/StaffInfo/GetStaffInfo?staffId=" + staffId)
    .then((res) => {
      console.log(res.data);
      ruleForm.password = res.data.password;
    });
};

//修改密码
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      axios.put("route/api/Staff/UpdPassword", ruleForm).then((res) => {
        if (res.data == 0) {
          ElMessage.error("确认新密码与新密码不一致，请重新输入");
          return;
        }
        localStorage.removeItem("token");
        localStorage.removeItem("staffId");
        ElMessage.success("修改成功，请重新登录此账号");
        router.push("/sys/login");
      });
    } else {
      return;
    }
  });
};

//注销当前登录的账户
const cancelAccount = () => {
  ElMessageBox.confirm("确定要注销当前登录账号吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "error",
  })
    .then(() => {
      axios
        .put("route/api/Staff/LogoutStaff?staffId=" + staffId)
        .then((res) => {
          if (res.data == 1) {
            localStorage.removeItem("token");
            localStorage.removeItem("staffId");
            ElMessage({
              message: "注销成功，请登录其他账号",
              type: "success",
            });
            router.push("/sys/login");
          }
        });
    })
    .catch(() => {});
};
</script>
<style>
.centered {
  width: 5em;
  height: 5em;
  margin-top: 50px;
  margin-left: 80px;
  margin-right: 80px;
}
</style>